<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <!-- 具名插槽即是父组件对应标签 -->
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <div id="app">
        <turnip>
            <!-- 一对一使用 -->
            <template v-slot:header>
                <p>turnip1</p>
            </template>
            <template v-slot:footer>
                <p>turnip2</p>
            </template>
            <template v-slot:main>
                <p>turnip3</p>
            </template>

            <template v-slot='slotProps'>
                <p>{{slotProps.data}}</p>
            </template>
            <!-- 456会被非具名插槽替换 -->
            <!-- 多次使用 -->
            <p slot="kang">另一种具名插槽</p>
            <p slot="kang">另一种具名插槽</p>
            123456
        </turnip>

    </div>
    <template id="tem">
        <div id="">
            <slot></slot>
            <slot name='kang'></slot>
            <slot name="header"></slot>
            <slot name="main"></slot>
            <slot name="footer"></slot>
            <slot name='kang'></slot>
            <p>
                <slot :data='arr'></slot>
            </p>

        </div>
    </template>
    <script type="text/javascript">
        Vue.component("turnip", {
            template: "#tem",
            data() {
                return {
                    arr: ['js', 'C++'],
                };
            },
        })
        let app = new Vue({
            el: "#app",

        })
    </script>
</body>

</html>